<template>
	<view>
		<!-- 代理人表单 -->
		<template>
			<!-- 我的地址 (不可编辑) -->
			<!-- <view class="form-item">
				<text class="label">APP下载地址</text>
				<view class="input-group">
					<input class="input disabled-input" disabled :value="myAddress"  placeholder="我的钱包地址" />
					<view class="copy-btn" @click="copyAddress">
						<image style="width: 40rpx;height: 40rpx;" src="/static/commonImg/fuzhihuang.png"></image>
					</view>
				</view>
			</view> -->
			<!-- 账号 -->
			<view class="form-item">
				<text class="label">代理人账号</text>
				<input class="input" v-model="formData.accountNumber" placeholder="请输入代理人账号" @blur="validateAddress" />
				<text class="error" v-if="errors.accountNumber">{{ errors.accountNumber }}</text>
			</view>
			<!-- 密码 -->
			<view class="form-item">
				<text class="label">初始登录密码</text>
				<input class="input" v-model="formData.password" placeholder="请输入初始登录密码" @blur="validatePassword"
					type="password" maxlength="6" />
				<text class="error" v-if="errors.password">{{ errors.password }}</text>
			</view>
		</template>
		<text class="setTitle">设置返佣</text>
		<!-- 重要提示 -->
		<view class="notice">
			<text class="notice-icon">!</text>
			<view class="notice-content">
				<text>您的下级代理返佣点数只能小于或者等于您自己</text>
			</view>
		</view>
		<!-- 返佣设置 -->
		<template>
			<view class="tabs-container">
				<view class="tabs-header">
					<view v-for="(tab, index) in tabs" :key="index"
						:class="['tab-header', activeTab === index ? 'active' : '']" @click="switchTab(index)">
						{{ tab.title }}
					</view>
					<!-- 滑动指示器 -->
					<view class="slider" :style="sliderStyle"></view>
				</view>

				<!-- 代收内容 -->
				<view v-if="activeTab === 0" class="content">
					<view class="table">
						<view class="table-row header-row">
							<view class="table-cell">类型</view>
							<view class="table-cell">返佣比例</view>
						</view>

						<view v-if="collectDivide && collectDivide.length>0" v-for="(item, index) in collectDivide" :key="index" class="table-row">
							<view class="table-cell">
								<image class="pay-img" :src="payimg(item.bank_type_id)"></image>
								<view>{{ paytype(item.bank_type_id) }}</view>
							</view>
							<view class="table-cell">
								<view class="rate-input">
									<input type="number" v-model="item.rate" @input="chInput" :placeholder="'最高'+item.rebate_ratio" max="100" min="0" />
									<text class="percent">%</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 代付内容 -->
				<view v-if="activeTab === 1" class="content">
					<view class="table">
						<view class="table-row header-row">
							<view class="table-cell">类型</view>
							<view class="table-cell">返佣比例</view>
						</view>

						<view v-if="payDivide" class="table-row">
							<view class="table-cell">
								<image class="pay-img" :src="payimg(payDivide.bank_type_id)"></image>
								<view>{{ paytype(payDivide.bank_type_id) }}</view>
							</view>
							<view class="table-cell">
								<view class="rate-input">
									<input type="number" v-model="payDivide.rate" :placeholder="'最高'+payDivide.payment_rebate" max="100"
										min="0" />
									<text class="percent">%</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 另一个模板 -->
				<template v-if="template==2">
					<!-- 代收内容 -->
					<view v-if="activeTab === 0" class="content">
						<view class="table">
							<view class="table-row header-row">
								<view class="table-cell">类型</view>
								<view class="table-cell">额度区间</view>
								<view class="table-cell">返佣比例</view>
							</view>
					
							<view v-for="(item, index) in collectItems" :key="index" class="table-row">
								<view class="table-cell type">
									<image class="pay-img" :src="item.img"></image>
									<view>{{ item.type }}</view>
								</view>
								<view class="table-cell">{{ item.range }}</view>
								<view class="table-cell">
									<view class="rate-input">
										<input type="number" v-model="item.rate" @input="chInput" :placeholder="'最高'+item.rate" max="100" min="0" />
										<text class="percent">%</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 代付内容 -->
					<view v-if="activeTab === 1" class="content">
						<view class="table">
							<view class="table-row header-row">
								<view class="table-cell">类型</view>
								<view class="table-cell">额度区间</view>
								<view class="table-cell">返佣比例</view>
							</view>
					
							<view v-for="(item, index) in payItems" :key="index" class="table-row">
								<view class="table-cell type">{{ item.type }}</view>
								<view class="table-cell">{{ item.range }}</view>
								<view class="table-cell">
									<view class="rate-input">
										<input type="number" v-model="item.rate" :placeholder="'最高'+item.rate" max="100"
											min="0" />
										<text class="percent">%</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</template>
			</view>
		</template>
		<!-- 账号和保存 -->
		<view class="quit" @click="saveSettings">
			<view class="quit-btn">保存</view>
		</view>
	</view>
</template>

<script src="./index.js"></script>
<style src="./index.scss" lang="scss" scoped></style>